import React, { Component } from 'react'
import axios from "axios"
// import Axios from "../../utils/axios"
import styles from "./goods.module.scss"

class GoodPro extends Component {
  state = {
    bg: '',
    priceTitle: [],
    goodsList: [],
    runList: [],
    floorList: [],
    arr1: [],
    arr2: [],
    arr3: [],
    arr4: [],
    arr5: [],
  }
  componentDidMount() {
    //****************** */
    var that = this
    //初始加载第一页商品数据
    var page = 1

    axios.all([
      axios.get('/topic/v1/nine/getBanner.json?_=1598253652080'),
      axios.get('/topic/v1/nine/getCommodityBase.json?_=1598255106675'),
      axios.get('/topic/v1/nine/getCommodityPage.json?id=' + page + '&size=42&page=1&_=1598261827514'),
      axios.get('/topic/v1/nine/getBoardcast.json?_=1598338340663'),
      axios.get('/topic/v1/nine/getCommodityBase.json?_=1598360959338'),
    ])
      .then(axios.spread(function (bgData, priceTitleData, goodsData, runListData, priceTitleImg) {
        // 上面请求都完成后，才执行这个回调方法
        // console.log(runListData.data);
        let bg = bgData.data.data.wapUrl
        let priceTitle = priceTitleData.data.data.floorList
        let goodsList = goodsData.data.data.commodityList
        let runList = runListData.data.data.commodityList
        let floorList = priceTitleImg.data.data.floorList

        //----------------
        that.setState({
          bg,
          priceTitle,
          goodsList,
          runList,
          floorList,
          index: 1,
          id: 1,
          bgColor: false,
        })
      }));
    //****************** */
  }

  handel = function (v) {
    axios.get('/topic/v1/nine/getCommodityPage.json?id=' + v.id + '&size=42').then(res => {
      var goodsList = res.data.data.commodityList
      var m = []
      if (v.id === 1) {
        var arr1 = goodsList
        m = arr1
        this.setState({
          arr1,
        })
      }
      if (v.id === 2) {
        var arr2 = goodsList
        m = arr2
        this.setState({
          arr2,
        })
      }
      if (v.id === 3) {
        var arr3 = goodsList
        m = arr3
        this.setState({
          arr3,
        })
      }
      if (v.id === 4) {
        var arr4 = goodsList
        m = arr4
        this.setState({
          arr4,
        })
      }
      if (v.id === 5) {
        var arr5 = goodsList
        m = arr5
        this.setState({
          arr5,
        })
      }
      this.setState({
        id: v.id,
        index: v.id,
        goodsList: m,
        bgColor: true,
      })
    })

  }
  render() {
    return (
      <div className={styles.app}>
        <div className={styles.goodsTop}>
          <div className={styles.bg}>
            <img src={this.state.bg} alt="" />
          </div>
          <div className={styles.goodsRun}>
            <div className={styles.goodsRunBox}>
              <div className={styles.goodsRunTitle}>
                <span className={styles.runTitle}>专区新品</span>
                <span ref={input => this.textInput = input}>好商品，超值价</span>
              </div>
              <div className={styles.runBox}>
                {
                  this.state.runList.map((v, i) => {
                    if (i <= 2) {
                      return <div key={i} className={styles.run}>
                        <img src={v.pngPicUrl} alt="" onClick={() => {
                          this.props.history.push("/ProductDetail/?id=" + v.itemId)
                        }} />
                        <div className={styles.text}>
                          <h3 onClick={() => {
                            this.props.history.push("/ProductDetail/?id=" + v.itemId)
                          }}>{v.itemName}</h3>
                          <div className={styles.runPrice}>
                            <span className={styles.priceText}>超值价:</span>
                            <span className={styles.price}>{v.afterPrice}</span>
                          </div>
                          <div className={styles.runBuy}>加入购物车</div>
                        </div>
                      </div>
                    }
                    return ''
                  })
                }
              </div>
            </div>
          </div>
          {/* 商品列表开始 */}
          <div className={styles.goodsBox}>
            <div className={styles.goodsList} ref='submit'>
              <div className={styles.priceTitle}>
                {
                  this.state.priceTitle.map((v, i) =>
                    <span className={
                      this.state.id === v.id ? styles.priceActive : styles.price
                    } key={i} onClick={(key) => {
                      if (i + 1 === v.id) {
                        // 非空不再重新请求数据。。开始
                        if (this.state.arr1.length === 0 && v.id === 1) {
                          this.handel(v)
                        } else if (this.state.arr1 !== '' && v.id === 1) {
                          let k = this.state.arr1
                          this.setState({
                            id: v.id,
                            index: v.id,
                            goodsList: k
                          })
                        }
                        if (this.state.arr2.length === 0 && v.id === 2) {
                          this.handel(v)
                        } else if (this.state.arr2 !== '' && v.id === 2) {
                          let k = this.state.arr2
                          this.setState({
                            id: v.id,
                            index: v.id,
                            goodsList: k
                          })
                        }
                        if (this.state.arr3.length === 0 && v.id === 3) {
                          this.handel(v)
                        } else if (this.state.arr3 !== '' && v.id === 3) {
                          let k = this.state.arr3
                          this.setState({
                            id: v.id,
                            index: v.id,
                            goodsList: k
                          })
                        }
                        if (this.state.arr4.length === 0 && v.id === 4) {
                          this.handel(v)
                        } else if (this.state.arr4 !== '' && v.id === 4) {
                          let k = this.state.arr4
                          this.setState({
                            id: v.id,
                            index: v.id,
                            goodsList: k
                          })
                        }
                        if (this.state.arr5.length === 0 && v.id === 5) {
                          this.handel(v)
                        } else if (this.state.arr5 !== '' && v.id === 5) {
                          let k = this.state.arr5
                          this.setState({
                            id: v.id,
                            index: v.id,
                            goodsList: k
                          })
                        }
                        // 非空不再重新请求数据。。结束
                        //获取节点,点击priceTitle使其吸顶
                        const inputDom = this.refs.submit;
                        const long = inputDom.getBoundingClientRect().top;
                        let htmlElement = document.documentElement;
                        htmlElement.scrollTop = long + htmlElement.scrollTop + 5;
                      }
                    }
                    }>
                      {v.name}
                    </span>
                  )
                }
              </div>
              <div className={styles.banner}>
                {
                  this.state.floorList.map((v, i) => {
                    if (this.state.index === i + 1) {
                      return <img key={i} src={v.wapUrl} alt="" />
                    }
                    return ''
                  }
                  )
                }
              </div>
              <div className={styles.goodsTable}>
                {
                  this.state.goodsList.map((v, i) =>
                    <div key={i} className={styles.goods}>
                      <div className={styles.listBox} onClick={() => {
                        this.props.history.push("/ProductDetail/?id=" + v.itemId)
                      }}>
                        <div className={styles.goodsListBox}>
                          <div className={styles.goodsImg}>
                            <img src={v.picUrl} alt="" />
                            <span className={styles.comments}>好评率 {v.praiseRate}%</span>
                          </div>
                          <div className={styles.goodsDetails}>
                            <h2>{v.itemName}</h2>
                            <div className={styles.priceBox}>
                              <span className={styles.text}>{v.desc}</span>
                              <span className={styles.sale}>{v.tagList}</span>
                              <div className={styles.nowPrice}>
                                <span className={styles.afterPrice}><span>￥</span>{v.afterPrice}</span>
                                <span className={styles.nowText}>升级后超价值</span>
                              </div>
                              <div className={styles.buy}>立即购买</div>
                            </div>
                          </div>
                        </div>
                        <div className={styles.description}>{v.reason}</div>
                      </div>
                    </div>
                  )
                }
              </div>
            </div>
          </div>
          {/* 商品列表结束 */}
        </div>
      </div>
    )
  }

}
export default GoodPro
